<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('设置为按钮组风格')}`">{{ $t('设置为按钮组风格') }}</t>
            <li>
                <span class="d-code">split-button</span>可控制下拉触发元素是否呈现为按钮风格
            </li>
            <li>
                <span class="d-code">button-type</span>可以设置按钮样式
            </li>
        </template>
        <div class="dropdown-split-button">
            <sib-dropdown split-button button-type="danger" :options="dropdownData">
                菜单选项
            </sib-dropdown>
            <sib-dropdown split-button button-type="warning" :options="dropdownData"></sib-dropdown>
        </div>
    </example>
</template>

<script>

export default {
    setup() {
        return {
            dropdownData: [
                {
                    label: '双皮奶',
                    value: 1,
                },
                {
                    label: '小蛋挞',
                    value: 2,
                },
                {
                    label: '黄金狮子头',
                    value: 3,
                },
                {
                    label: '黄金糕',
                    value: 4,
                },
            ],
            templateString: `<template>
    <div class="example-box">
        <sib-dropdown split-button button-type="danger" :options="dropdownData">菜单选项</sib-dropdown>
        <sib-dropdown split-button button-type="warning" :options="dropdownData"></sib-dropdown>
    </div>
</template>

<script>

export default {
    setup() {
        return {
            dropdownData: [
                {
                    label: '双皮奶',
                    value: 1,
                },
                {
                    label: '小蛋挞',
                    value: 2,
                },
                {
                    label: '黄金狮子头',
                    value: 3,
                },
                {
                    label: '黄金糕',
                    value: 4,
                },
            ],
        };
    },
};
<\/script>`,
        };
    },
};
</script>

<style lang="scss">
.dropdown-split-button {
    display: flex;
    .sib-dropdown {
        margin-right: 10px;
    }
}
</style>
